﻿@using Entity;
@model Config_File_Third_Kind;
<!DOCTYPE html>
<html lang="zh-CN">

<head>


    <script src="~/lib/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
    <script src="//unpkg.com/element-plus"></script>






    <style>


        .form-button {
            text-align: right;
            margin: 10px 0;
        }

        .bordered-table {
            width: 70%;
            border-collapse: collapse;
        }

            .bordered-table input {
                width: 500px; /* 固定宽度 */
                padding: 6px; /* 可选：调整内边距让输入框更美观 */
            }

            .bordered-table th,
            .bordered-table td {
                border: 1px solid #ccc;
                padding: 8px;
            }

            .bordered-table th {
                background-color: #f7d08b;
                text-align: right;
                width: 200px;
                font-weight: normal;
            }


        body {
            background-color: #FFFFCC; /* 示例浅灰色，可替换为你的图片主色值 */
        }

    </style>

</head>

<body>



    <div id="app">
         <form asp-action="AddCFTK">
        <span>您正在做的业务是：人力资源--客户化设置--人力资源档案管理设置--II级机构设置--III级机构添加</span>
        <div class="form-button">
            <input type="submit" value="提交" />
            <a asp-controller="SJJGSZ" asp-action="Index">返回</a>
        </div>

        <table class="bordered-table">
            <tr>
                <th>I级机构名称</th>
                <td>
                        <el-cascader v-model="selectedOrg"
                                     :options="orgOptions"
                                     :props="cascaderProps"
                                     placeholder="请选择机构（I级 → II级 → III级）"
                                     clearable
                        v-on:change="handleOrgChange"
                                     class="el-calendar-table"></el-cascader>

                        <!-- 添加隐藏字段用于表单提交 -->
                        <input type="hidden" name="first_kind_id" :value="selectedOrg[0]">
                        @* <input type="hidden" name="second_kind_id" :value="selectedOrg[1]"> *@
                        @* <input type="hidden" name="third_kind_id" :value="selectedOrg[2]"> *@


                        <!-- I级机构名称隐藏字段 -->
                        <input type="hidden" name="first_kind_name" :value="firstKindName">

                </td>
            </tr>
            <tr>
                <th>II级机构名称</th>
                <td>

                        <el-cascader  v-model="selectedSecondOrg"
                                     :options="secondOrgOptions"
                                     :props="secondCascaderProps"
                                     placeholder="请选择II级机构（可选）"
                                     clearable
                        v-on:change="handleSecondOrgChange"
                                    class="el-cascader-custom-class"

                        >
                        </el-cascader>
                        <!-- 添加隐藏字段传递II级ID -->
                        <input type="hidden" name="second_kind_id" :value="selectedSecondOrg[0]">


                        <!-- II级机构名称隐藏字段 -->
                        <input type="hidden" name="second_kind_name" :value="secondKindName">

                </td>
            </tr>
            <tr>
                <th>III级机构编号</th>
                <td> <input asp-for="@Model.third_kind_id" /></td>
            </tr>
            <tr>
                <th>III级机构名称</th>
                <td>  <input asp-for="@Model.third_kind_name" /></td>
            </tr>
            <tr>
                <th>销售责任人编号（多个编号之间请用"半角逗号"加"一个空格"隔开，如", "）</th>
                <td><input asp-for="@Model.third_kind_sale_id" /></td>
            </tr>
            <tr>
                <th>是否为零售店（是/否）</th>
                <td> <select asp-for="@Model.third_kind_is_retail" asp-items="ViewBag.F"></select></td>
            </tr>
        </table>
    </form>

    </div>
   
    
    <script type="text/javascript">

        const { createApp, ref, onMounted } = Vue;
        const app = createApp({
            setup(){

                 // 机构选择相关
        const selectedOrg = ref([]);  // 选中的机构ID数组
        const orgOptions = ref([]);   // 级联选择器的选项数据
        const secondKindName = ref('');  // 二级机构名称（可选）

        // 级联选择器配置
        const cascaderProps = ref({
          expandTrigger: 'click',
          value: 'id',
          label: 'name',
          children: 'children',
          checkStrictly: true
        });



        const selectedSecondOrg = ref([]); // II级选中的ID数组
        const secondOrgOptions = ref([]); // II级级联数据
        const secondCascaderProps = ref({
          expandTrigger: 'click',
          value: 'id',
          label: 'name',
          children: 'children', // 若有III级子级需保留
          checkStrictly: true // 允许单独选择II级
        });



            // 新增：响应式变量存储名称
        const firstKindName = ref(''); // I级名称
      //  const secondKindName = ref(''); // II级名称





        // 获取机构数据
        const fetchOrgData = async () => {
          try {
            const response = await axios.get('/GetCascadeData');
            orgOptions.value = response.data;
          } catch (error) {
            console.error('获取机构数据失败:', error);
            ElMessage.error('获取机构数据失败，请重试');
          }
        };

        // 处理级联选择变化
        const handleOrgChange = (value) => {

          


         console.log('选中的机构ID:', value);
        const firstId = value[0];
        if (firstId) {
            // 从级联数据中获取I级名称
            const firstItem = orgOptions.value.find(item => item.id === firstId);
            firstKindName.value = firstItem?.name || ''; // 更新名称
            fetchSecondOrgDataByFirstId(firstId);
        } else {
            firstKindName.value = ''; // 清空名称
            secondOrgOptions.value = [];
            secondKindName.value = '';
        }


        };


                // 新增：根据I级ID加载II级数据的函数
        const fetchSecondOrgDataByFirstId = async (firstId) => {


                  try {
            const response = await axios.get(`/GetSecondCascadeData?firstId=${firstId}`);

            // 安全解析 children 字段
            secondOrgOptions.value = response.data.map(item => ({
              ...item,
              children: parseChildren(item.children) // 使用安全解析函数
            }));
          } catch (error) {
            console.error('加载II级机构失败:', error);
            ElMessage.error('加载II级机构失败，请重试');
          }
        };

        // 安全解析 children 字段的辅助函数
        const parseChildren = (childrenData) => {
          if (!childrenData) return []; // 处理 null 或空字符串
          try {
            return JSON.parse(childrenData); // 尝试解析 JSON 字符串
          } catch (e) {
            console.warn('解析 children 失败:', e);
            return []; // 解析失败时返回空数组
          }


        };



            // 新增：II级选择变化时更新名称
        const handleSecondOrgChange = (value) => {
            const secondId = value[0];
            if (secondId) {
                const secondItem = secondOrgOptions.value.find(item => item.id === secondId);
                secondKindName.value = secondItem?.name || ''; // 更新名称
            } else {
                secondKindName.value = ''; // 清空名称
            }
        };






        // 页面加载时初始化
        onMounted(() => {
          fetchOrgData();
        });

        return {
          selectedOrg,
          orgOptions,
          cascaderProps,
          handleOrgChange,
          selectedSecondOrg,
           secondCascaderProps,
           secondOrgOptions,
           fetchSecondOrgDataByFirstId,
           secondKindName,
           firstKindName,
           secondKindName,
           handleSecondOrgChange,

        };

             
            }
        })

         app.use(ElementPlus).mount('#app');
    </script>


</body>


</html>
